<template>
  <view class="pagesC tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#16171D00">
      <view class="" style="width: 70vw;overflow: hidden;margin-top: 6rpx;">
        <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#FFF" inactiveColor="#FFFFFF80"
          :bold="true" :fontSize="36"></tn-tabs>
      </view>
    </tn-nav-bar>

    <view class="tn-margin-bottom-xl" :style="{paddingTop: vuex_custom_bar_height + 20 + 'px'}">

      <view class="" v-if="current==0">

        <!-- 数字模型 start-->
        <view class="tn-flex tn-flex-wrap" style="margin: 0 15rpx;">
          <block v-for="(item, index) in content" :key="index">
            <view class="" style="width: 50%;" @click="tn('../product/product')">
              <view class="product-content">
                <view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
                  <view class="image-product">
                  </view>
                </view>

                <view class="tn-text-justify tn-padding-top-sm tn-padding-left-sm tn-padding-right-sm tn-padding-top">
                  <text class="tn-color-white">{{ item.desc }}</text>
                </view>

                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
                  <view class="justify-content-item tn-flex tn-flex-col-center tn-color-gray"
                    style="margin-left: -6rpx;">
                    <text class="tn-text-lg">￥</text>
                    <text class="tn-padding-right-sm tn-text-lg">{{ item.price }}</text>
                    <!-- <text class="tn-color-gray tn-text-sm"> 66 人购买</text> -->
                  </view>
                  <view class="justify-content-item tn-flex tn-flex-col-center">
                    <text class="tn-color-gray tn-text-sm"> {{ item.number }} 人购买</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
        <!-- 数字模型 end-->

      </view>

      <view class="" v-if="current==1">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容被幽灵卷走了</view>
        </view>
      </view>

      <view class="" v-if="current==2">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容真被幽灵卷走了</view>
        </view>
      </view>
      <view class="" v-if="current==3">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容真被幽灵卷走了，嘤</view>
        </view>
      </view>
      <view class="" v-if="current==4">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容真被幽灵卷走了，嘤嘤</view>
        </view>
      </view>
      <view class="" v-if="current==5">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容真被幽灵卷走了，嘤嘤嘤</view>
        </view>
      </view>
      <view class="" v-if="current==6">
        <view class="" style="padding: 15vh 20rpx;opacity: 0.6;">
          <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
            <text class="tn-icon-ghost-fill tn-color-gray--light"></text>
          </view>
          <view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容真被幽灵卷走了，嘤嘤嘤嘤</view>
        </view>
      </view>

    </view>

    <view class='tn-tabbar-height'></view>
    <view class="bg-tabbar-shadow"></view>
  </view>
</template>

<script>
  export default {
    name: 'PageC',
    data() {
      return {
        current: 0,
        scrollList: [{
            name: '推荐'
          },
          {
            name: '模型'
          },
          {
            name: '凶姐'
          },
          {
            name: '图鸟'
          },
          {
            name: '手办'
          },
          {
            name: '版权'
          },
          {
            name: '其他'
          }
        ],
        content: [{
            price: '29',
            number: '12',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1684559753546-assets/web-upload/e65b2ffd-16be-4933-9cd8-0d468a75a116.png',
          },
          {
            price: '38',
            number: '26',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1686108279713-assets/web-upload/80f2ca2c-6da3-49d6-829c-17f2d2e272eb.png',
          },
          {
            price: '29',
            number: '48',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1686109051466-assets/web-upload/a4c52d96-43c1-43a9-892f-f9da5870dccf.png',
          },
          {
            price: '59',
            number: '129',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1686109051409-assets/web-upload/984c06aa-500e-4f51-98a9-5cfc5ef271e6.png',
          },
          {
            price: '38',
            number: '9',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1686109742515-assets/web-upload/2bffcb18-827b-4b3f-add1-d58420a5b20a.png',
          },
          {
            price: '79',
            number: '108',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1686109742730-assets/web-upload/48601236-d1cb-4f78-a0dc-80f2a21525a8.png',
          },
          {
            price: '59',
            number: '21',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621411-assets/web-upload/e58d6a75-6d1f-4649-8fa2-bd28f9accba5.png',
          },
          {
            price: '69',
            number: '62',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621419-assets/web-upload/af28fc86-6734-4b22-8b2f-df918e916ace.png',
          },
          {
            price: '59',
            number: '26',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621345-assets/web-upload/5f6a2220-887b-4afa-b296-7b066efb9350.png',
          },
          {
            price: '38',
            number: '10',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621337-assets/web-upload/e96bb224-44e3-4a3b-a18e-4309611f3def.png',
          },
          {
            price: '79',
            number: '33',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621338-assets/web-upload/4bf11bd2-f04e-4e74-b569-72f4b6b38da3.png',
          },
          {
            price: '59',
            number: '1',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621633-assets/web-upload/827f3e21-c7e4-4223-892f-a0092c79a4ed.png',
          },
          {
            price: '69',
            number: '23',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621532-assets/web-upload/0516c061-b781-413d-8087-d8a417f416c7.png',
          },
          {
            price: '59',
            number: '8',
            desc: '凶姐到此一游',
            mainImage: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1687402621391-assets/web-upload/cef50c96-48bb-49fa-9de4-76718aecc150.png',
          }
        ],
      }
    },

    methods: {
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
    }
  }
</script>


<style lang="scss" scoped>
  .pagesC {
    max-height: 100vh;
  }

  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow {
    // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
    box-shadow: 0rpx 0rpx 220rpx 0rpx rgba(0, 0, 0, 0.55);
    position: fixed;
    bottom: -100rpx;
    height: 100rpx;
    width: 100vw;
    z-index: 1;
  }

  /* 底部安全边距 start*/
  .tn-tabbar-height {
    min-height: 60rpx;
    height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    height: calc(80rpx + constant(safe-area-inset-bottom));
  }


  /* 数字模型 start*/
  .product-content {
    // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    border-radius: 15rpx;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1rpx solid #494B51;
    margin: 15rpx;
  }

  .image-product {
    height: 327rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }

  .image-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 15rpx;
  }

  /* 数字模型 end*/
</style>